<template>
  <div class="app-container">
    <PageSearch :showSearch.sync="showSearch" :getList="getList" :handleQuery="handleQuery" :resetQuery="resetQuery">
      <template #form>
        <el-form :model="queryParams" ref="queryForm" size="small">
          <el-row>
            <el-form-item prop="orderNo">
              <el-input
                :placeholder="$t('订单号')"
                v-model="queryParams.orderNo"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <el-form-item prop="distrName">
              <el-input
                :placeholder="$t('租户名称')"
                v-model="queryParams.distrName"
                clearable
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
            <!-- 1-换货 2-退款 3-补发 -->
            <el-form-item prop="processingMethod">
              <el-select
                :placeholder="$t('处理方式')"
                v-model="queryParams.processingMethod"
                clearable
                @change="getList"
              >
                <el-option :label="$t('换货')" :value="1" />
                <el-option :label="$t('退款')" :value="2" />
                <el-option :label="$t('补发')" :value="3" />
                <el-option :label="$t('买家拒收')" :value="4" />
              </el-select>
            </el-form-item>
            <!-- 申请状态 1-待审核 2-审核完成待处理 3-完成 4-驳回 -->
            <el-form-item prop="status">
              <el-select :placeholder="$t('申请状态')" v-model="queryParams.status" clearable @change="getList">
                <el-option :label="$t('待审核')" :value="1" />
                <el-option :label="$t('审核完成待处理')" :value="2" />
                <el-option :label="$t('完成')" :value="3" />
                <el-option :label="$t('驳回')" :value="4" />
              </el-select>
            </el-form-item>
          </el-row>
        </el-form>
      </template>
      <template #actions>
        <el-button
          @click="handleApply('rejectSubmit')"
          v-hasPermi="['distribution:orderQuestionApply:rejectSubmit']"
          type="primary"
          plain
          size="mini"
        >
          {{ $t('买家拒收申请') }}
        </el-button>
        <el-button
          @click="handleApply()"
          v-hasPermi="['distribution:orderQuestionApply:insertOrderQuestionApply']"
          type="primary"
          plain
          size="mini"
        >
          {{ $t('申请') }}
        </el-button>
        <el-tooltip effect="dark" placement="top-start">
          <template #content>
            <p>1.要退钱的选退款</p>
            <p>2.不退钱的选换货或者补发</p>
            <p>3.换货有入库出库操作对冲，只需要承担再发货的运费</p>
            <P>4.补发需要产品的选择承担人，和运费承担人</P>
          </template>
          <el-button size="mini" type="text" icon="el-icon-info" circle></el-button>
        </el-tooltip>
      </template>
    </PageSearch>

    <el-table
      :height="calTableHeight()"
      ref="TableRef"
      v-loading="loading"
      :data="tableData"
      @selection-change="(rows) => (tableCheck = rows)"
    >
      <el-table-column type="selection" width="55" align="center" />

      <!-- 订单号 包裹号 发货时间 申请时间 申请状态 问题原因 问题sku 操作 -->
      <el-table-column show-overflow-tooltip :label="$t('包裹号')" width="200" align="center" prop="packageNo" />
      <el-table-column show-overflow-tooltip :label="$t('订单号')" width="200" align="center" prop="orderNo" />
      <el-table-column show-overflow-tooltip :label="$t('发货时间')" align="center" prop="deliverTime" />
      <el-table-column show-overflow-tooltip :label="$t('申请时间')" align="center" prop="applyTime" />
      <el-table-column show-overflow-tooltip :label="$t('租户名称')" align="center" prop="distrName">
        <template slot-scope="{ row }">
          {{ row.distrName ? row.distrName : $t('平台') }}
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('申请状态')" align="center" prop="status">
        <!-- 申请状态 1-待审核 2-审核完成待处理 3-完成 4-驳回 -->
        <template slot-scope="{ row }">
          <span v-if="row.status == 1" style="color: orange">待审核</span>
          <span v-if="row.status == 2" style="color: blue">审核完成待处理</span>
          <span v-if="row.status == 3" style="color: green">完成</span>
          <span v-if="row.status == 4" style="color: red">驳回</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('处理方式')" align="center" prop="recordsId">
        <!-- 处理方式 1-换货 2-退款 3-补发 -->
        <template slot-scope="{ row }">
          <span v-if="row.processingMethod == 1" :style="{ color: $randomColor(1) }">换货</span>
          <span v-if="row.processingMethod == 2" :style="{ color: $randomColor(2) }">退款</span>
          <span v-if="row.processingMethod == 3" :style="{ color: $randomColor(3) }">补发</span>
          <span v-if="row.processingMethod == 4" :style="{ color: $randomColor(4) }">买家拒收</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip :label="$t('问题原因')" align="center" prop="reason" />
      <el-table-column :label="$t('问题sku')" align="center" :width="skuWidth" prop="applySkuList">
        <template slot-scope="{ row }">
          <div class="sku-list">
            <div v-for="item in row.applySkuList" class="sku-list-item">
              <div class="skuNo">{{ item.skuNo }}</div>
              <el-image
                style="width: 30px; height: 30px; object-fit: cover"
                :key="Math.random()"
                v-hover="item.imgUrl"
                :src="item.imgUrl + '?x-oss-process=image/resize,w_100/quality,q_70'"
              />
              <div>{{ item.num }}</div>
            </div>
          </div>
        </template>
      </el-table-column>
      <!-- 操作 -->
      <el-table-column :label="$t('操作')" align="center" fixed="right" width="100">
        <!-- 卖家编辑 查看问题详情 审核 完成处理 -->

        <template slot-scope="{ row }">
          <el-dropdown @command="(command) => handleCommand(command, row)">
            <span class="el-dropdown-link">
              {{ $t('更多') }}
              <i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <!-- 处理方式 1-换货 2-退款 3-补发 4-买家拒收 -->
              <el-dropdown-item
                :disabled="row.processingMethod == '4'"
                command="editApply"
                v-hasPermi="['distribution:orderQuestionApply:updateOrderQuestionApply']"
              >
                {{ $t('卖家编辑') }}
              </el-dropdown-item>
              <el-dropdown-item
                command="ApprovalDetail"
                v-hasPermi="[
                  'distribution:orderQuestionApply:getOrderQuestionApplyDetails',
                  'distribution:orderQuestionApply:getOrderQuestionApplyDetailsByReject',
                ]"
              >
                {{ $t('查看问题详情') }}
              </el-dropdown-item>

              <!-- status 为4 驳回时 审核和完成处理置灰 -->
              <el-dropdown-item
                v-hasPermi="['distribution:orderQuestionApply:examines']"
                command="orderApproval"
                :disabled="row.status == '4' || row.status == '3'"
              >
                {{ $t('审核') }}
              </el-dropdown-item>
              <!-- status 为4 驳回时 审核和完成处理置灰 -->
              <el-dropdown-item
                v-hasPermi="['distribution:orderQuestionApply:completeHandle']"
                command="AcceptanceCompleted"
                :disabled="row.status == '4' || row.status == '3' || row.status == '1'"
              >
                {{ $t('完成处理') }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <!-- 详情 -->
    <Detail :show.sync="detail.show" @getList="getList" :formData="detail.formData" />
    <!-- 申请 -->
    <Apply :show.sync="applyInfo.show" :type="applyInfo.type" @getList="getList" :formData="applyInfo.formData" />
    <!-- 买家拒收申请 -->
    <ApplySellerRefuse
      :show.sync="applySellerRefuse.show"
      :type="applySellerRefuse.type"
      @getList="getList"
      :formData="applySellerRefuse.formData"
    />
    <!-- 审核或详情 -->
    <OrderApproval
      :show.sync="ApprovalInfo.show"
      @getList="getList"
      :type="ApprovalInfo.type"
      :listData="ApprovalInfo.listData"
    ></OrderApproval>
    <!-- 导出面单 -->
    <ExportExpressSheet
      action="/distribution/orderBatch/exportExpressSheet"
      templateUrl="distribution/orderBatch/downPackageExpressTemplate"
      :show.sync="exportExpressSheet.show"
    />
    <!-- 导入 -->
    <Import
      action="/distribution/orderQuestionApply/importOrderQuestionPackageExpressNo"
      @success="getList"
      :show.sync="importInfo.show"
      :query="importInfo.query"
      :tip="$t('仅允许导入.csv,.xls格式文件')"
      accept=".csv,xls"
    >
    </Import>
  </div>
</template>

<script>
import { deleteOrderMercariIndividualByRecordsId } from '@/api/orderManage/mercariPersonalSync'
import Apply from './components/apply.vue'
import ApplySellerRefuse from './components/applySellerRefuse.vue'
import Detail from './components/detail.vue'
import ExportExpressSheet from '@/views/distribution/orderBatchs/components/exportExpressSheet.vue'
import OrderApproval from './components/orderApproval.vue'
import Import from '@/components/Import/index.vue'
import { getOrderQuestionApplyList } from '@/api/orderManage/orderIssuesApplyList'
export default {
  activated() {
    this.$nextTick(() => this.$refs['TableRef']?.doLayout())
  },
  name: 'OrderIssuesApplyList',
  components: {
    Detail,
    Apply,
    ApplySellerRefuse,
    OrderApproval,
    ExportExpressSheet,
    Import,
  },
  data() {
    return {
      skuWidth: 0,
      /**导入 */
      importInfo: {
        show: false,
        query: {
          // 1-黑猫，2-佐川，
          packageExpressType: '',
        },
      },
      exportExpressSheet: {
        show: false,
        formDate: {},
      },
      tableCheck: [],
      /**审核或详情 */
      ApprovalInfo: {
        type: '1', // 类型
        listData: {},
        show: false, // 是否显示
      },
      /**买家拒收申请 */
      applySellerRefuse: {
        show: false,
        type: '',
        formData: {},
      },
      /**申请 */
      applyInfo: {
        show: false,
        type: '',
        formData: {},
      },
      /**详情 */
      detail: {
        show: false,
        formData: {},
      },

      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: false,
      // 总条数
      total: 0,
      // 供应厂家表格数据
      tableData: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        time: [],
      },
    }
  },
  created() {
    this.getList()
  },
  methods: {
    /**导出包裹 */
    checkFileDataExprort() {
      const data = {
        batchList: this.tableCheck.map((i) => i.id),
      }
      this.download('/distribution/orderBatch/exportPackage', data, `${new Date().getTime()}.xlsx`)
    },
    /** 导出面单*/
    handleExportExpressSheet() {
      this.exportExpressSheet.show = true
    },
    /**审核或详情 */
    handleApproval(data, type) {
      this.ApprovalInfo.type = type
      this.ApprovalInfo.listData = data
      this.ApprovalInfo.show = true
    },
    handleApply(type = '') {
      /**买家拒收申请 */
      if (type == 'rejectSubmit') {
        this.applySellerRefuse.type = 'add'
        this.applySellerRefuse.show = true
      } else {
        this.applyInfo.type = 'add'
        this.applyInfo.show = true
      }
    },
    handleEditApply(row) {
      if (row.processingMethod == 4) {
        this.applySellerRefuse.type = 'edit'
        this.applySellerRefuse.formData = row
        this.applySellerRefuse.show = true
      } else {
        this.applyInfo.type = 'edit'
        this.applyInfo.formData = row
        this.applyInfo.show = true
      }
    },
    handleCommand(command, row) {
      console.log(`command ==>`, command)
      switch (command) {
        case 'editApply' /**卖家编辑 */:
          this.handleEditApply(row)
          break
        case 'detail':
          this.handleDetail(row)
          break
        case 'orderApproval':
          this.handleApproval(row, '1')
          break
        case 'ApprovalDetail':
          this.handleApproval(row, '3')
          break
        case 'AcceptanceCompleted':
          this.handleApproval(row, '2')
          break
        default:
          break
      }
    },

    handleDetail(row) {
      this.detail.show = true
      this.detail.formData = row
    },

    /** 查询供应厂家列表 */
    getList() {
      /****************** 处理查询条件 *********************/
      const selectDate = this.queryParams.time || []
      const createTimeStart = selectDate[0] || ''
      const createTimeEnd = selectDate[1] || ''
      const data = {
        ...this.queryParams,
        createTimeStart,
        createTimeEnd,
      }
      delete data.time
      /**************** 处理查询条件 end *******************/
      this.loading = true
      getOrderQuestionApplyList(data).then((response) => {
        this.tableData = response.rows
        let maxLength = 0
        response.rows.map((i) => {
          if (i.applySkuList.length > maxLength) {
            maxLength = i.applySkuList.length
          }
        })
        this.skuWidth = maxLength * 200
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      Object.keys(this.queryParams).forEach((key) => (this.queryParams[key] = ''))
      this.queryParams.pageSize = 10
      this.queryParams.pageNum = 1
      this.handleQuery()
    },
  },
}
</script>

<style scoped lang="scss">
.sku-list {
  display: flex;

  &-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #eee;
    border-radius: 3px;
    padding: 0 2px;
    margin-right: 5px;
    gap: 8px;
    .skuNo {
      white-space: nowrap;
    }
  }
}
</style>
